    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data的两种写法</title>
     <!-- 引入Vue -->
     <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!--  
        data与el的2种写法
            1.el有2种写法
            （1）new Vue时配置el属性
            （2）先创建Vue实例，随后再铜鼓vm.$mount('#root')指定el的值
            2.data有2种写法
            （1）对象式
            （2）函数式
            如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
            3.一个重要的原则：
                由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是Vue实例了
    -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>

</body>

<script type="text/javascript">
    // https://v2.cn.vuejs.org/v2/api/#productionTip
    Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。

    // --------- el的两种写法 ---------
    const v = new Vue({
        // el: "#root",// 第一种写法
        data: {
            name: "chenjt"
        }
    })
    console.log(v)
    v.$mount("#root") // 第二种写法


    
    // --------- data的两种写法 ---------
    new Vue({
        el: '#root',
        // data的第一种写法：对象式
        data: {
            name: 'chenjt'
        },

        // data的第二种写法：函数式
        // data: ()=>{// 不能这样写，写成箭头函数，this就是Window对象，因为箭头函数没有自己的this，所以就会往上找
        // 只能用以下两种写法，因为data是要交给Vue去调用的
        // data: function(){
        data(){
            console.log('@@@',this) // 此处的this是Vue实例对象
            return {
                name: 'chenjt'
            }
        }
    })



</script>


</html>